<template>
  <div class="hello">
    <div class="mulColor">
      <el-radio-group v-model="themecolor" >
        <el-radio label="20a0ff">浅蓝-20a0ff</el-radio>
        <el-radio label="fa4f52">橙色-fa4f52</el-radio>
        <el-radio label="0000ff">紫色-0000ff</el-radio>
        <el-radio label="008000">草绿-008000</el-radio>
        <el-radio label="00a597">蓝绿-00a597</el-radio>
        <el-radio label="e01-B072681">灰红黄-e01-B072681</el-radio>
        <el-radio label="e02-B088682">灰黄-e02-B088682</el-radio>
        <el-radio label="e03-B09C683">灰土-e03-B09C683</el-radio>
        <el-radio label="e04-A6B0684">灰黄绿-e04-A6B0684</el-radio>
        <el-radio label="e05-85B0685">灰绿-e05-85B0685</el-radio>
        <el-radio label="e06-68B09A6">灰绿蓝-e06-68B09A6</el-radio>
        <el-radio label="e07-68A9B07">灰深蓝-e07-68A9B07</el-radio>
        <el-radio label="e09-687CB09">灰深蓝-e09-687CB09</el-radio>
        <el-radio label="e10-7468B010">灰深蓝-e10-7468B010</el-radio>
        <el-radio label="e11-9368B011">灰深蓝-e11-9368B011</el-radio>
        <el-radio label="e12-B0687412">灰深蓝-e12-B0687412</el-radio>
        <el-radio label="e13-77644013">灰深蓝-e13-77644013</el-radio>
        <el-radio label="e14-57714614">灰深蓝-e14-57714614</el-radio>
        <el-radio label="e15-3A749815">灰深蓝-e15-3A749815</el-radio>
        <el-radio label="e17-7375E317">灰深蓝-e17-7375E317</el-radio>
        <el-radio label="e19-7D151519">灰深蓝-e19-7D151519</el-radio>
      </el-radio-group>
    </div>

    <el-button type="primary" >{{$t('public.btn1')}}</el-button>
    <div class="sel-color">
      <div class="mod" @click="selShow()"><el-button type="primary" >主题选择</el-button></div>
      <div class="info" :style="selcolorinfo">
        <span class="md" @click="selColor('e01-B072681')" style="background: #B07268">灰红黄</span>
        <span class="md" @click="selColor('e02-B088682')" style="background: #B08868">灰黄</span>
        <span class="md" @click="selColor('e03-B09C683')" style="background: #B09C68">灰土</span>
        <span class="md" @click="selColor('e04-A6B0684')" style="background: #A6B068">灰黄绿</span>
        <span class="md" @click="selColor('e05-85B0685')" style="background: #85B068">灰绿</span>
        <span class="md" @click="selColor('e06-68B09A6')" style="background: #68B09A">灰绿蓝</span>
        <span class="md" @click="selColor('e07-68A9B07')" style="background: #68A9B0">灰深蓝</span>
        <span class="md" @click="selColor('e09-687CB09')" style="background: #687CB0">灰深蓝</span>
        <span class="md" @click="selColor('e10-7468B010')" style="background: #7468B0">灰深蓝</span>
        <span class="md" @click="selColor('e11-9368B011')" style="background: #9368B0">灰深蓝</span>
        <span class="md" @click="selColor('e12-B0687412')" style="background: #B06874">灰深蓝</span>
        <span class="md" @click="selColor('e13-77644013')" style="background: #776440">灰深蓝</span>
        <span class="md" @click="selColor('e14-57714614')" style="background: #577146">灰深蓝</span>
        <span class="md" @click="selColor('e15-3A749815')" style="background: #3A7498">灰深蓝</span>
        <span class="md" @click="selColor('e17-7375E317')" style="background: #7375E3">灰深蓝</span>
        <span class="md" @click="selColor('e19-7D151519')" style="background: #7D1515">灰深蓝</span>
        <span class="md" @click="selColor('20a0ff')" style="background: #20a0ff">浅蓝</span>
        <span class="md" @click="selColor('fa4f52')" style="background: #fa4f52">橙色</span>
        <span class="md" @click="selColor('0000ff')" style="background: #0000ff">紫色</span>
        <span class="md" @click="selColor('008000')" style="background: #008000">草绿</span>
        <span class="md" @click="selColor('00a597')" style="background: #00a597">蓝绿</span>
      </div>
    </div>



    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary"  @click="$router.push({'path':'/addInfo'})">addInfo</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <b>addInfo</b>
    <b @click="$router.push({'path':'/Login'})">Login</b>
    <h1>{{ msg }}</h1>
    <h2>Essential Links111</h2>
  </div>
</template>

<script>
  import { toggleClass } from '@/utils/index'
export default {
  name: 'HelloWorld',

  data () {
    return {
      // themecolor:'',
      msg: 'Welcome to Your Vue.js App',
      selcolorinfo:{},
    }
  },


  methods:{
    selShow(){
      this.selcolorinfo = {'width':'186px','padding':'10px','border':'#ccc 1px solid'};
    },
    selColor(sel){
       this.$store.commit('setThemeColor',sel);
    },

  },
  computed:{
    themecolor:{
      get(){
        return this.$store.state.themecolor;
      },
      set(val){
        this.$store.commit('setThemeColor',val);
      }
    }
  },
  watch:{
    themecolor:{
      handler(){
        toggleClass(document.body, "custom-" + this.themecolor);
      }
    }
  },
  mounted(){
    toggleClass(document.body, "custom-" + this.themecolor);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
